<template>
  <div class="reset">
    <ReturnBack></ReturnBack>
     <van-form @submit="onSubmit">
       <van-field
      v-model="password"
      type="password"
      name="密码"
      left-icon="bag-o"
      placeholder="请输入密码"
    />
    <van-field
      v-model="password2"
      type="password"
      name="密码"
      left-icon="bag-o"
      placeholder="请再次输入密码"
    />
    <div class="tishi" v-show=list.isActive>{{list.msg}}</div>
    <div style="margin: 16px;">
      <van-button round block type="info" native-type="submit" style="border:none;
      background-color:#ee0a24;border-radius:5px;margin-top:.3rem">确定</van-button>
    </div>
     </van-form>
  </div>
</template>

<script>
import ReturnBack from '@/components/return.vue'
export default {
  name: 'ResetVue',
  data () {
    return {
      password: null,
      password2: null,
      // eslint-disable-next-line quotes
      list: { msg: "两次密码输入不一致", isActive: false }
    }
  },
  methods: {
    onSubmit () {
      if (this.password !== this.password2) {
        this.list.isActive = true
      }
    }
  },
  mounted () {
  },
  components: {
    ReturnBack
  }
}
</script>

<style lang="scss" scoped>
.tishi {
  font-size: .4rem;
  color: red;
  margin: 10px 16px;
}
</style>
